<template>
    <div class="mainWrapper">
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/' }">
				<i class="lh lh-diaodu fw_100"></i>
			</el-breadcrumb-item>
			<el-breadcrumb-item>系统设置</el-breadcrumb-item>
			<el-breadcrumb-item>技术服务费列表</el-breadcrumb-item>
		</el-breadcrumb>
        <div class="content_Box box-shadow">
			<div class="py_5 px_10">
				<el-row>
					<el-col :span="4">
						<el-button type="success" @click="goToAdd()" round size="mini">新增技术服务费规则</el-button>
					</el-col>
					<el-col :span="20">
						<el-form :inline="true" :model="searchForm" class="form-inline fr" @keyup.enter.native="shearchBtn()">
                            <el-form-item class="w_120">
                                <el-select v-model="searchForm.city_id" placeholder="城市" @change="changeCity">
                                    <el-option
                                        v-for="item in cityList"
                                        :key="item.id"
                                        :label="item.city_name"
                                        :value="item.id"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item>
								<el-select v-model="areaArr" multiple collapse-tags placeholder="商圈">
									<el-button size="mini" type="primary" class="round-right all-area" @click="selectAllArea()" native-type="button">{{ areaStatus ? '全选' : '取消全选' }}</el-button>
									<el-option
										v-for="item in areaList"
										:key="item.id"
										:label="item.area_name"
										:value="item.id"
									></el-option>
								</el-select>
							</el-form-item>
                            <el-form-item class="w_120">
                                <el-select v-model="searchForm.industry" placeholder="行业" clearable @change="changeIndustry">
                                    <el-option
                                        v-for="(item, index) in industryJobList"
                                        :key="index"
                                        :label="item.label_name"
                                        :value="item.id"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
							<el-form-item>
								<el-select v-model="searchForm.label_id" placeholder="岗位名称" class="w_120" clearable>
									<el-option 
                                        v-for="item in TypeArr" 
                                        :key="item.id" 
                                        :label="item.label_name" 
                                        :value="item.id"
                                    ></el-option>
								</el-select>
							</el-form-item>
                            <el-form-item>
								<el-input size="mini" class="w_120" v-model="searchForm.creater_name" placeholder="操作人"></el-input>
							</el-form-item>
                            <el-form-item>
								<el-date-picker
									size="mini"
									class="w_180i"
									type="datetime"
									value-format="yyyy-MM-dd HH:mm:ss"
									format="yyyy-MM-dd HH:mm:ss"
									placeholder="开始时间"
                                    default-time=00:00:00
									v-model="searchForm.start_time"
								></el-date-picker> 
                            </el-form-item>
                            ~
							<el-form-item>
								<el-date-picker
									size="mini"
									class="w_180i"
									type="datetime"
									value-format="yyyy-MM-dd HH:mm:ss"
									format="yyyy-MM-dd HH:mm:ss"
									placeholder="结束时间"
                                    default-time=23:59:59
									v-model="searchForm.end_time"
								></el-date-picker>
							</el-form-item>
							<el-button size="mini" type="primary" class="round-right" native-type="button" @click="shearchBtn">搜索</el-button>
							<el-button size="mini" round @click="resetBtn">重置</el-button>
						</el-form>
					</el-col>
				</el-row>
			</div>
            <!-- 表格数据 -->
            <div class="tableMaxBox">
				<template>
					<el-table :data="feeList" stripe>
                        <el-table-column type="index" label="序号" width="50"></el-table-column>
                        <el-table-column property="city_name" label="城市" width="100"></el-table-column>
                        <el-table-column property="area_name" label="商圈" width="100"></el-table-column>
                        <el-table-column property="industry_name" label="行业" width="100"></el-table-column>
                        <el-table-column property="label_name" label="岗位" width="100"></el-table-column>
                        <el-table-column property="fee30" label="黄金(元/小时)" width="100">
                            <template slot-scope="scope">
                                {{(scope.row.fee30/100).toFixed(2)}}
                            </template>
                        </el-table-column>
                        <el-table-column property="fee20" label="白银(元/小时)" width="100">
                            <template slot-scope="scope">
                                {{(scope.row.fee20/100).toFixed(2)}}
                            </template>
                        </el-table-column>
                        <el-table-column property="fee10" label="青铜(元/小时)" width="100">
                            <template slot-scope="scope">
                                {{(scope.row.fee10/100).toFixed(2)}}
                            </template>
                        </el-table-column>
                        <el-table-column property="status" label="状态" width="120">
                            <template slot-scope="scope">
                                <span class="success" v-if="scope.row.status == 1">启用</span>
                                <span class="danger" v-else>停用</span>
                            </template>
                        </el-table-column>
                        <el-table-column property="creater_name" label="操作人" width="120"></el-table-column>
                        <el-table-column property="add_time" label="操作时间"></el-table-column>
                        <el-table-column property="remark" label="备注"></el-table-column>
                        <el-table-column fixed="right" label="操作" width="100">
                            <template slot-scope="scope">
                                <el-button @click.native.prevent="editorRow(scope.row)" type="text" size="small">编辑 | </el-button>
                                <el-button @click.native.prevent="updateStatus(scope.row.id,2)" class="danger" type="text" size="small" v-if="scope.row.status == 1">停用</el-button>
                                <el-button @click.native.prevent="updateStatus(scope.row.id,1)" class="success" type="text" size="small" v-else>启用</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <!-- 分页组件 -->
					<page :total="total" :pageNums="pageNum" :disableMountedFetch="true" @pagedata="onChildValue"></page>
                </template>
            </div>
        </div>
    </div>
</template>
<script>
    import { fetManageFeeList,fetchAreaList,updateStatus,fetchLabelList } from '@/api/shop.js'
    import { fetchCityList } from '@/api/city.js'
    import { fetchIndustryJob } from '@/api/label.js'
    export default {
        name: 'manageFeeList',
        data() {
            return {
                searchForm: {
                    city_id: '', //城市
                    industry: '', //行业
                    label_id: '', //岗位
                    creater_name: '', //操作人
                    start_time: '', //开始时间
                    end_time: '' //结束时间
                },
                cityList: [], //城市列表
                areaList: [], //商圈列表
                industryJobList: [], //行业列表
                TypeArr: [],  //岗位类别
                feeList: [], //列表数据
			    areaStatus: true, //商圈全选
                areaArr: [],
                pageNum: 1,
			    pageSizeNow: 20,
                total: 0
            }
        },
        mounted() {
            this.getCityList() //获取城市列表
        },
        methods: {
            async getManageFeeList(){
                try {
                    let ret = await fetManageFeeList({ page:this.pageNum,pageSize:this.pageSizeNow,area_id:this.areaArr.join(','),...this.searchForm})
                    this.feeList = ret.list
                    this.total = ret.count
                } catch (err) {
                    console.log('err:', err)
                }
            },
            //搜索
            shearchBtn() {
                this.pageNum = 1
                this.getManageFeeList()
            },
            //重置
            resetBtn(){
                Object.keys(this.searchForm).forEach((key) => (this.searchForm[key] = ''))
                this.areaArr = []
                this.pageNum = 1
                this.areaStatus = true
                this.getManageFeeList()
            },
            //新增管理费规则跳转路由
            goToAdd(){
			    this.$router.push('/addManageFee')
            },
            // 获取城市列表
            async getCityList() {
                try {
                    let ret = await fetchCityList()
                    this.cityList = ret.list
                    this.searchForm.city_id = +this.cityList[0].id 
                    this.getManageFeeList() //获取管理费列表
                    this.listArea()
                    this.getIndustryJob()
                } catch (err) {
                    console.log('err:', err)
                }
            },
            // 监听城市val变化
            changeCity() {
                this.searchForm.industry = ''
                this.searchForm.label_id = ''
                this.listArea()
                this.getIndustryJob()
            },
            //获取商圈列表
            async listArea() {
                try {
                    this.areaArr = []
                    this.areaStatus = true
                    let ret = await fetchAreaList({
                        city_id: this.searchForm.city_id
                    })
                    if (ret.list.length) {
                        ret.list.forEach(item => {
                            item.value = item.area_name
                        })
                        this.areaList = ret.list
                        // 如果本地this.area_arr。存在值，那么不再赋予，如果不存在。赋予相关值
                        // if (this.areaArr == '' || this.areaArr == null) {
                        //     // 默认选中非254-平谷的
                        //     this.areaList.forEach(element => {
                        //         // 平谷
                        //         if (element.area_name != '平谷') {
                        //             var pusharr = element.id
                        //             this.areaArr.push(pusharr)
                        //         }
                        //     })
                        // }
                    } else {
                        this.areaList = []
                    }
                } catch (err) {
                    console.log("获取商圈"+err)
                }
            },
            //全选-取消全选商圈
            selectAllArea() {
                let arr = []
                this.areaList.forEach(item => {
                    arr.push(item.id)
                })
                if (this.areaStatus == true) {
                    this.areaArr = arr
                } else {
                    this.areaArr = []
                }
                this.areaStatus = !this.areaStatus
            },
            //行业列表
            async getIndustryJob() {
                this.TypeArr = []
                try {
                    let ret = await fetchIndustryJob({
                        city_id: this.searchForm.city_id
                    })
                    if(ret.length>0){
                        this.industryJobList = ret
                    }else{
                        this.industryJobList = []
                    }
                } catch (err) {
                    console.log(err)
                }
            },
            //监听行业
            changeIndustry() {
                //清理岗位
                this.searchForm.label_id = '';
                //岗位列表
                if(this.searchForm.industry){
                    this.TypeArr = this.industryJobList.filter(x => x.id == this.searchForm.industry)[0].children
                }else{
                    this.TypeArr = ''
                }
            },

            //操作 - 编辑
            editorRow(e){
                this.$router.push({
                    path:"/AddManageFee",
                    query:e
                })
            },
            // 编辑状态
            async updateStatus(id,type){
                try {
                    let ret = await updateStatus({
                        id: id,
                        status: type
                    })
                    this.getManageFeeList()
                } catch (err) {
                    console.log(err)
                }
            },
            //分页组件->子组件传值
            onChildValue(item) {
                this.pageNum = item[0]
                this.pageSizeNow = item[1]
                this.getManageFeeList()
            }
        }
    }
</script>
<style scoped lang="scss">
    .success{
        color: green !important;
    }
    .danger{
        color: red !important;
    }
</style>


// WEBPACK FOOTER //
// src/components/shopPrice/ManageFeeList.vue